<template>
    <div id="userPage">
<!--        <div>-->
            <img :alt="user.username" class="img" :src="user.userAvatar ? user.userAvatar : myAvatar ">
<!--        </div>-->
        <a-tag checkable size="large" color="red" :default-checked="true" v-if="user.userRole === 'admin'">管理员</a-tag>
        <a-tag checkable size="large" color="green" :default-checked="true" v-else>普通用户</a-tag>
        <a-form :model="form"
                label-align="left"
                auto-label-width
                :style="{ width: '600px',margin:'0 auto',marginTop:'68px'}"
                @submit="handleSubmit">
            <a-form-item field="userAccount" label="用户名">
                <a-input
                        v-model="form.userName"
                        placeholder="请输入用户名"
                />
            </a-form-item>

            <a-form-item label="简介">
                <a-input v-model="form.userProfile" placeholder="输入简介" />
            </a-form-item>

            <a-form-item>
<!--                <div-->
<!--                        style="-->
<!--            display: flex;-->
<!--            width: 100%;-->
<!--            align-items: center;-->
<!--            justify-content: space-between;-->
<!--            margin-left: 450px-->
<!--          "-->
<!--                >-->
                <a-space style="margin-top:24px">
                    <a-button type="primary" status="warning" style="width: 120px;margin-right: 50px" @click="doLogout">
                        注销
                    </a-button>
                    <a-button type="primary" html-type="submit" style="width: 120px;margin-left: 400px">
                        修改
                    </a-button>
                </a-space>
<!--                </div>-->
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
    import {useLoginUserStore} from "@/store/userStore";
    import {reactive,watchEffect} from "vue";
    import {updateMyUserUsingPost, userLogoutUsingPost} from "@/api/userController";
    import message from "@arco-design/web-vue/es/message"
    import {useRouter} from "vue-router";
    import {myAvatar} from '@/constant/photo'

    const loginUserStore = useLoginUserStore()
    const user = loginUserStore.loginUser
    const router = useRouter();

    const form = reactive<API.LoginUserVO>({
        userName:'',
        userProfile:'',
    });

    const loadData = () =>{
        form.userName = user.userName;
        form.userProfile = user.userProfile;
    }

    const handleSubmit = async () =>{
        const res = await updateMyUserUsingPost(form);
        if(res.data.code === 0){
            message.success("修改成功");
            // form = loginUserStore.fetchLoginUser
            window.location.reload()
        }else{
            message.error("修改失败")
        }
    }

    //注销
    const doLogout = async () =>{
        const res = await userLogoutUsingPost();
        if(res.data.code === 0){
            router.push({
                path:"/user/login",
                replace:true,
            })
        }
    }

    watchEffect(() =>{
        loadData()
    })

</script>

<style scoped>
    /*#userPage{*/
    /*    margin-top: 10px;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*}*/
    .img{
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
        border-radius: 20%;
        height: 135px;
        width: 135px;
        margin-left:500px;
    }
</style>